<template>
	<div class="header-wrapper">
		<img class="logo" :src="logoUrl" @click="$router.push({ name: 'Home' })" />
		<img
			class="logo-xs"
			:src="logoUrlXs"
			@click="$router.push({ name: 'Home' })"
		/>
		<el-menu
			:default-active="activeIndex"
			class="top-menu-list"
			mode="horizontal"
			@select="menuItemClick"
		>
			<el-menu-item index="Home">首页</el-menu-item>
			<el-menu-item index="File">网盘</el-menu-item>

			<li class="el-menu-item external-link">
				<a :href="backgroundUrl" target="_blank">后台</a>
			</li>
			<template v-if="isLogin">
					<!-- 为了和其他菜单样式保持一致，请一定要添加类名 el-menu-item -->
					<div class="el-menu-item profile" v-show="isLogin">
						<el-popover
							placement="bottom-end"
							width="280"
							v-model="visible"
							popper-class="my-popover"
						>
							<div class="profile-wrapper">
								<el-avatar :size="100" :src="avatar" />
								<div class="avatar-username-wrapper">
									<div class="username">{{ username }}</div>
									<div class="introduction">个人简介：随便写点什么。</div>
								</div>
							</div>
							<el-divider class="divider-wrapper" />
							<div class="item-wrapper">
								<div
									class="el-menu-item item"
									index="Profile"
									@click="profileButton()"
								>
									<i class="el-icon-user" style="margin-right: 20px" />
									个人主页
								</div>
								<div
									class="el-menu-item item"
									index="Exit"
									@click="exitButton()"
								>
									<i class="el-icon-wind-power" style="margin-right: 20px" />
									退出登录
								</div>
							</div>
							<el-avatar
								slot="reference"
								size="medium"
								:src="avatar"
								class="hover_avatar"
							/>
						</el-popover>
					</div>
			</template>

			<!-- 开发环境 -->
			<el-menu-item class="login" index="Login" v-show="!isLogin">
				登录
			</el-menu-item>
			<!-- 开发环境 -->
			<el-menu-item class="register" v-show="!isLogin" index="Register">
				注册
			</el-menu-item>
		</el-menu>
	</div>
</template>

<script>
import config from "@/config";

export default {
	name: 'MyHeader',
	data() {
		return {
			// logo
			logoUrl: require('_a/images/common/logo_header.png'),
			// 缩小版logo
			logoUrlXs: require('_a/images/common/logo_header_xs.png'),
			// 默认头像
			defaultAvatar: require('_a/images/common/avatar.png'),
			// 头像弹出框
			visible: false,
      // 后台地址
      backgroundUrl:`${config.backgroundUrl}`
		}
	},
	computed: {
		isLogin() {
			return this.$store.state.user.isLogin
		},
		username() {
			return this.$store.state.user.username
		},
		// 当前激活菜单的index
		activeIndex() {
			return this.$route.name || 'Home'
		},
		// 是否为生产环境
		isProductEnv() {
			return (
				process.env.NODE_ENV !== 'development' &&
				location.origin === 'http://cau1i.cn'
			)
		},
		// 屏幕宽度
		screenWidth() {
			return this.$store.state.common.screenWidth
		},
		// 头像
		avatar() {
			return this.$store.state.user.avatar !== undefined || ''
				? this.$store.state.user.avatar
				: this.defaultAvatar
		}
	},
	methods: {
		menuItemClick(key) {
			switch (key) {
				case 'Login':
					if (this.isProductEnv) {
						location.href = this.getAccountHref('/login')
					} else {
						this.$router.push({ name: key })
					}
					break
				case 'Register':
					if (this.isProductEnv) {
						location.href = this.getAccountHref('/register')
					} else {
						this.$router.push({ name: key })
					}
					break
				case 'Profile':
					if (this.isProductEnv) {
						location.href = this.getAccountHref('/profile')
					} else {
						this.$router.push({ name: key })
					}
					break
				case 'File':
					this.$router.push({
						name: key,
						query: { fileType: 0, filePath: '/' }
					})
					break
				default:
					this.$router.push({ name: key })
					break
			}
		},

		/**
		 * 生产环境账户网址
		 * @param path
		 * @returns {string}
		 */
		getAccountHref(path) {
			return `http://cau1i.cn/netdisk${path}`
		},
		/**
		 * 个人信息
		 * @description
		 */
		profileButton() {
			this.$router.push('/profile')
		},
		/**
		 * 退出登录
		 * @description 清除cookie存放的token并跳转到登录页面
		 */
		exitButton() {
			this.visible = false
			this.$confirm('确定注销并退出系统吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$store.dispatch('logout').then(() => {
					location.href = '/'
				})
			})
		}
	}
}
</script>

<style>
.el-popover.my-popover {
	border-radius: 5%;
}
</style>

<style lang="stylus" scoped>
@import '~_a/styles/varibles.styl';

.header-wrapper {
  height: 64px;
  width: 100%;
  padding: 0 20px;
  box-shadow: $tabBoxShadow;
  display: flex;

  .logo {
    margin: 0 24px 0 0;
    display: inline-block;
    height: 64px;
    cursor: pointer;
  }

  .logo-xs {
    display: none;
  }

  .el-menu-item {
    height 100%

    >>> .el-menu--horizontal {
      .el-menu-item:not(.is-disabled):hover {
        border-bottom-color: $Primary !important;
        background: $tabBackColor;
      }

      .external-link {
        padding: 0;

        a {
          display: block;
          padding: 0 20px;
        }
      }
    }
  }

  .top-menu-list {
    flex: 1;

    .login, .register, .profile, .exit, .user-exit-submenu {
      float: right;
    }
  }
}

.profile-wrapper {
  display: flex;
  flex: 1;
  padding: 0 10px;

  .avatar-username-wrapper {
    flex: 1;

    .username {
      font-size: 20px;
      padding: 10px 20px;
      display: flex;
    }

    .introduction {
      padding: 0 20px;
      font-size: 13px;
    }
  }
}

.divider-wrapper {
  margin-top: 20px;
  height 0.5px
}

.item-wrapper {
  margin-top: -25px;

  .item {
    height: 40px;
    line-height: 40px
  }
}
</style>
